import { DrawerForm } from '@ant-design/pro-form';
import { Descriptions, Space, Tag } from 'antd';
import React from 'react';

interface DetailsMarkProps {
  data: DatahubMarkData.MarkPage;
}
const DetailsMark: React.FC<DetailsMarkProps> = ({ data }) => {
  return (
    <DrawerForm
      title="编辑"
      drawerProps={{
        destroyOnClose: true,
        width: 500,
      }}
      trigger={<a>{data.name}</a>}
      submitter={false}
    >
      <Descriptions>
        <Descriptions.Item label="名称" span={3}>
          {data?.name}
        </Descriptions.Item>
        <Descriptions.Item label="描述" span={3}>
          {data?.describes}
        </Descriptions.Item>
        <Descriptions.Item label="命中词" span={3}>
          {data.hits.length}
        </Descriptions.Item>
        <Descriptions.Item label="触发条件" span={3}>
          {data?.occurrence}次
        </Descriptions.Item>
      </Descriptions>
      <Space size="small" wrap>
        {data.hits.map((item) => (
          <Tag>{item}</Tag>
        ))}
      </Space>
    </DrawerForm>
  );
};
export default DetailsMark;
